<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="el-icon-tickets"></i>
        <span>{{ $t("log.log") }}</span>
      </h2>
    </template>
    <template v-slot:search>
      <search>
        <div>
          <span class="label">{{ $t("log.module") }}</span>
          <el-select
            v-model="search_criteria.module"
            size="small"
            class="size"
            clearable
          >
            <el-option
              v-for="item in modules"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span class="label">{{ $t("log.execution_status") }}</span>
          <el-select
            v-model="search_criteria.status"
            size="small"
            class="size"
            clearable
          >
            <el-option
              v-for="item in execution_status"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div>
          <span class="label">{{ $t("log.execution_result") }}</span>
          <el-select
            v-model="search_criteria.result"
            size="small"
            class="size"
            clearable
          >
            <el-option
              v-for="item in execution_result"
              :key="item"
              :value="item"
              :label="item"
            >
            </el-option>
          </el-select>
        </div> -->
        <div>
          <span class="label">{{ $t("system.ip_address") }}</span>
          <virtual-list
            :value="search_criteria.host"
            size="small"
            class="size"
            :multiple="true"
            :list="hosts"
            @selectValue="handleSelectIp"
          ></virtual-list>
        </div>
        <div>
          <el-button size="small" class="kylin-button" @click="handleSearch">{{
            $t("Search")
          }}</el-button>
          <el-button size="small" class="kylin-button" @click="handleReset">{{
            $t("Reset")
          }}</el-button>
        </div>
      </search>
    </template>
    <template v-slot:content>
      <ky-table
        ref="table"
        :getData="getLogs"
        :search_data="search_data"
        :search_criteria="search_criteria"
        :watchs="watchs"
      >
        <template v-slot:table>
          <el-table-column :label="$t('log.execution_action')">
            <template slot-scope="scope">
              <router-link :to="$route.path + scope.row.id">
                {{ scope.row.action }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('log.execution_status')">
          </el-table-column>
          <!-- <el-table-column prop="result" :label="$t('log.execution_result')">
          </el-table-column> -->
          <el-table-column prop="module" :label="$t('log.module')">
          </el-table-column>
          <el-table-column prop="batchName" :label="$t('system.process_batch')">
          </el-table-column>
          <el-table-column prop="createdAt" :label="$t('log.occurrence_time')">
          </el-table-column>
          <el-table-column>
            <template slot="header">
              {{ $t("log.task_process") }}
            </template>
            <template slot-scope="scope">
              <el-progress
                :color="getColor(scope.row)"
                :percentage="getProgress(scope.row)"
                :format="format(scope.row)"
              ></el-progress>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot="header">
              {{ $t("action") }}
            </template>
            <template slot-scope="scope">
              <el-dropdown>
                <span class="kylin-more-action">
                  {{ $t("more_action")
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <authorization-dropdown-item
                    :disabled="
                      scope.row.status == '成功' || scope.row.status == '失败'
                    "
                    @click.native="handleCancel(scope.row)"
                    >{{ $t("cancel") }}</authorization-dropdown-item
                  >
                  <authorization-dropdown-item
                    :disabled="
                      scope.row.status == '成功' || scope.row.status == '失败'
                    "
                    @click.native="handleSuspend(scope.row)"
                    >{{ $t("suspend") }}</authorization-dropdown-item
                  >
                  <authorization-dropdown-item
                    :disabled="
                      scope.row.status == '成功' || scope.row.status == '失败'
                    "
                    @click.native="handleContinue(scope.row)"
                    >{{ $t("continue") }}</authorization-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import Search from "@/components/Search";
import kyTable from "@/components/KyTable";
import virtualList from "@/components/virtualList";
import { getLogs, continueTask, pauseTask, cancelTask } from "@/api/log";
import { getAgentList } from "@/api/system";
import AuthorizationDropdownItem from "@/components/AuthorizationDropdownItem";
export default {
  name: "log",
  components: {
    Page,
    Search,
    kyTable,
    virtualList,
    AuthorizationDropdownItem,
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  data() {
    return {
      modules: [
        "软件包组模块",
        "自定义脚本模块",
        "配置模块",
        "批次管理",
        "客户端管理",
        "扫描模块",
        "补丁模块",
        "SP升级模块",
        "迁移工具",
        "配置回退",
      ],
      execution_status: ["等待执行", "运行中", "取消", "成功", "失败", "暂停"],
      search_criteria: {
        module: "",
        status: "",
        result: "",
        host: [],
        sortBy: "id",
        sortOrder: "desc",
      },
      hosts: [],
      execution_result: [this.$t("done")],
      search_data: {
        action: {
          name: "log.execution_action",
          type: "text",
        },
        batchName: {
          name: "system.process_batch",
          type: "text",
        },
        createdAt: {
          name: "log.occurrence_time",
          type: "date",
        },
      },
      watchs: {
        tableData: function (newData) {
          let running = false;
          for (let i = 0; i < newData.length; i++) {
            if (newData[i].status === "运行中") {
              running = true;
              break;
            }
          }
          if (running) {
            this.timer = this.timer
              ? this.timer
              : setInterval(() => {
                  this.refresh();
                }, 1000);
          } else {
            this.timer && clearInterval(this.timer);
            this.timer = null;
          }
        },
      },
    };
  },
  mounted() {
    getAgentList({ paged: false }).then((res) => {
      let hosts = [];
      res.data.data.results.forEach((item) => {
        hosts.push(item.ip);
      });
      this.hosts = hosts;
    });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getLogs,
    format(row) {
      return function (per) {
        return row.progess;
      };
    },
    getColor(row) {
      if (row.status === "成功") {
        return "#67C23A";
      } else if (row.status === "失败") {
        return "red";
      } else {
        return "";
      }
    },
    getProgress(row) {
      let [done, sum] = row.progess.split("/");
      if (sum == 0) {
          return 0
      }
      return (done / sum) * 100;
    },
    handleCancel(row) {
      cancelTask({ id: row.id }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
        this.$refs.table.handleSearch();
      });
    },
    handleSelectIp(value) {
      this.search_criteria.host = value;
    },
    handleSuspend(row) {
      pauseTask({ id: row.id }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
        this.$refs.table.handleSearch();
      });
    },
    handleContinue(row) {
      continueTask({ id: row.id }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
        this.$refs.table.handleSearch();
      });
    },
    handleReset() {
      this.search_criteria.result = "";
      this.search_criteria.status = "";
      this.search_criteria.module = "";
      this.$refs.table.handleSearch();
    },
    handleSearch() {
      this.$refs.table.handleSearch();
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.label {
  font-weight: 600;
  margin-right: 10px;
}
.kylin-more-action {
  color: #36ade0;
  cursor: pointer;
}
/* .size {
  width: 120px;
} */
</style>